<aside style="background-color: var(--bs-secondary-bg-subtle);" class="mt-5">
    <div class="container-fluid container-xxl p-4 p-md-5">
        <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));">
            <twig:DocsLink
                title="Documentation"
                text="Symfony UX {{ package.humanName }} Docs"
                url="{{ package.officialDocsUrl }}"
                icon="symfony"
            />
            {% if package.screencastLink %}
                <twig:DocsLink
                    title="Screencasts"
                    text="{{ package.screencastLinkText }}"
                    url="{{ package.screencastLink }}"
                    icon="symfonycast"
                />
                <twig:DocsLink
                    title="Community"
                    text="Feedback · support · contributions."
                    url="https://github.com/symfony/ux"
                    icon="github"
                />
            {% else %}
                <twig:DocsLink
                    title="Community"
                    text="Feedback · support · contributions."
                    url="https://github.com/symfony/ux"
                    icon="github"
                />
                <twig:DocsLink
                    title="Support"
                    text="Get help with Symfony UX {{ package.humanName }}"
                    url="{{ url('app_support') }}"
                    icon="symfony"
                />
            {% endif %}

        </div>
    </div>
</aside>
